<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多彩主题切换</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <style>
        /* 平滑过渡效果 */
        body {
            transition: background-color 0.5s ease, color 0.5s ease;
        }
        
        .theme-btn {
            transition: transform 0.2s ease;
        }
        
        .theme-btn:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800 min-h-screen">
    <div class="container mx-auto px-4 py-12">
        <!-- 标题区域 -->
        <div class="text-center mb-12">
            <h1 class="text-3xl font-bold mb-2">多彩主题切换</h1>
            <p class="text-gray-600">选择你喜欢的背景主题</p>
        </div>
        
        <!-- 主题选择区域 -->
        <div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4 text-center">选择主题</h2>
            
            <div class="grid grid-cols-5 gap-3 mb-6">
                <!-- 主题按钮 -->
                <button class="theme-btn w-full h-12 rounded-full bg-gray-100 border-2 border-transparent active" data-theme="default"></button>
                <button class="theme-btn w-full h-12 rounded-full bg-blue-100 border-2 border-transparent" data-theme="blue"></button>
                <button class="theme-btn w-full h-12 rounded-full bg-green-100 border-2 border-transparent" data-theme="green"></button>
                <button class="theme-btn w-full h-12 rounded-full bg-purple-100 border-2 border-transparent" data-theme="purple"></button>
                <button class="theme-btn w-full h-12 rounded-full bg-amber-100 border-2 border-transparent" data-theme="amber"></button>
            </div>
            
            <!-- 深色模式切换 -->
            <div class="flex items-center justify-center space-x-2 pt-4 border-t border-gray-100">
                <i class="fa fa-moon-o text-gray-500"></i>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" id="dark-mode" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                </label>
                <i class="fa fa-sun-o text-gray-500"></i>
            </div>
        </div>
        
        <!-- 预览区域 -->
        <div class="max-w-md mx-auto bg-white/80 backdrop-blur-sm rounded-lg shadow-sm p-6 text-center">
            <h3 class="font-medium mb-3">主题预览</h3>
            <p>这是一段预览文本，会随着主题变化而改变颜色。</p>
            <div class="mt-4 p-3 rounded bg-white/50 inline-block">
                <i class="fa fa-paint-brush text-2xl"></i>
            </div>
        </div>
    </div>

    <script>
        // 主题定义
        const themes = {
            default: {
                bg: 'bg-gray-100',
                text: 'text-gray-800'
            },
            blue: {
                bg: 'bg-blue-100',
                text: 'text-blue-800'
            },
            green: {
                bg: 'bg-green-100',
                text: 'text-green-800'
            },
            purple: {
                bg: 'bg-purple-100',
                text: 'text-purple-800'
            },
            amber: {
                bg: 'bg-amber-100',
                text: 'text-amber-800'
            },
            dark: {
                bg: 'bg-gray-900',
                text: 'text-gray-100'
            }
        };
        
        // DOM元素
        const themeButtons = document.querySelectorAll('.theme-btn');
        const darkModeToggle = document.getElementById('dark-mode');
        const body = document.body;
        
        // 检查本地存储的主题设置
        const savedTheme = localStorage.getItem('selectedTheme') || 'default';
        const savedDarkMode = localStorage.getItem('darkMode') === 'true';
        
        // 应用保存的主题
        applyTheme(savedTheme);
        darkModeToggle.checked = savedDarkMode;
        if (savedDarkMode) {
            applyDarkMode();
        }
        
        // 主题按钮点击事件
        themeButtons.forEach(button => {
            button.addEventListener('click', () => {
                // 移除所有按钮的激活状态
                themeButtons.forEach(btn => btn.classList.remove('border-gray-600', 'active'));
                
                // 添加当前按钮的激活状态
                button.classList.add('border-gray-600', 'active');
                
                // 应用选中的主题
                const theme = button.getAttribute('data-theme');
                applyTheme(theme);
                
                // 保存主题设置
                localStorage.setItem('selectedTheme', theme);
                
                // 如果启用了深色模式，保持深色模式
                if (darkModeToggle.checked) {
                    applyDarkMode();
                }
            });
        });
        
        // 深色模式切换事件
        darkModeToggle.addEventListener('change', () => {
            if (darkModeToggle.checked) {
                applyDarkMode();
                localStorage.setItem('darkMode', 'true');
            } else {
                // 恢复到之前选择的主题
                applyTheme(localStorage.getItem('selectedTheme') || 'default');
                localStorage.setItem('darkMode', 'false');
            }
        });
        
        // 应用主题函数
        function applyTheme(themeName) {
            // 移除所有主题类
            Object.values(themes).forEach(theme => {
                body.classList.remove(theme.bg, theme.text);
            });
            
            // 应用新主题类
            body.classList.add(themes[themeName].bg, themes[themeName].text);
        }
        
        // 应用深色模式
        function applyDarkMode() {
            // 移除所有主题类
            Object.values(themes).forEach(theme => {
                body.classList.remove(theme.bg, theme.text);
            });
            
            // 应用深色模式
            body.classList.add(themes.dark.bg, themes.dark.text);
        }
    </script>
</body>
</html>
